<template>
	<!-- #ifndef MP-WEIXIN -->
	<view>
		<el-card class="box-card" style="margin: auto">
			<el-row>
				<el-col :span="10" style="margin-top: 5px">Total {{ fileList.length }} notes</el-col>
				<el-col :span="8">
					<view class="demo-input-suffix">
						Search
						<el-input placeholder="笔记标题" prefix-icon="el-icon-search" v-model="keyword" style="width: 200px"
							@keypress.enter.native="search"></el-input>
					</view>
				</el-col>
			</el-row>
			<el-table :data="search().slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border
				stripe>
				<el-table-column prop="note_title" label="笔记标题"></el-table-column>
				<el-table-column prop="content" label="内容" width="300" show-overflow-tooltip></el-table-column>
				<el-table-column prop="thumbs_up" label="点赞数"></el-table-column>
				<el-table-column prop="comment" label="评论数"></el-table-column>
				<el-table-column prop="collection" label="收藏数"></el-table-column>
				<el-table-column prop="create_time" label="创建日期"></el-table-column>
				<el-table-column fixed="right" label="操作" width="80">
					<template slot-scope="scope">
						<i class="el-icon-delete" @click="delFile(scope.$index)"></i>
					</template>
				</el-table-column>
			</el-table>
			<el-row style="margin-top: 25px">
				<el-col>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalfile"></el-pagination>
				</el-col>
			</el-row>
		</el-card>
	</view>
	<!-- #endif -->
</template>

<script>
	// import filesApi from "@/api/ky";

	export default {
		data() {
			return {
				keyword: "",
				currentPage: 1, //初始页
				pagesize: 10,
				fileList: [],
				paths: [],
				totalfile: 0,
			};
		},
		methods: {
			search() {
				if (this.keyword == "") {
					this.totalfile = this.fileList.length
					return this.fileList;
				}
				//	return this.getFileList();
				let result = this.fileList.filter((element) => {
					return element.note_title.includes(this.keyword);
				});
				this.totalfile = result.length
				return result;
			},
			delFile(index) {
				let id = this.fileList[index].id
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除笔记吗？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: 'http://localhost:8081/note/deleteById?id=' + id,
								method: 'DELETE',
								success: (res) => {
									console.log(res)
									if (res.data.state == 200) {
										this.fileList.splice(index, 1);
										this.$message({
											type: "success",
											message: "删除成功!",
										});
									}
								}
							});
						}
					}
				})
			},
			// 初始页currentPage、初始每页数据数pagesize和数据data
			handleSizeChange(size) {
				this.pagesize = size;
				//this.getFileList();
				//  console.log(this.pagesize)  //每页下拉显示数据
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			//	this.getFileList();
				// console.log(this.currentPage)  //点击第几页
			},

			//获取文件列表
			getFileList() {
				uni.request({
					url: 'http://localhost:8081/note/getAll',
					method: 'GET',
					data: {

					},
					success: (res) => {
						this.fileList = res.data
					}
				});
			},
		},
		beforeMount() {
			this.getFileList();
		},
	};
</script>

<style>
	.el-row {
		margin-bottom: 15px;
	}
</style>
